<template>
	<div>
		<div class="h2">角色模块权限</div>
		<div id="components-form-demo-advanced-search">
			<!-- <a-form class="ant-advanced-search-form home-form" :form="form" @submit="handleSearch">
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item label="关键字"><a-input autocomplete="off" class="field-right" placeholder="请输入关键字搜索" v-decorator="[`key`]" /></a-form-item>
					</a-col>
				</a-row>
			</a-form> -->
		</div>
		<a-button-group size="default" class="option">
			<!-- <a-button type="primary" @click="handleSearch">搜索</a-button>
			<a-button @click="handleReset">重置</a-button> -->
			<a-button type="primary" @click="addList">{{currentType?'编辑模块权限':'返回'}}</a-button>
		</a-button-group>
		<div>
			<el-table ref="tableList" :data="data" v-loading="loading" border :max-height="tableHeight" highlight-current-row style="width: 100%;">
				<el-table-column prop="DepartName" label="部门" min-width="180">
					<template slot-scope="scope">
						{{ scope.row.DepartName }}
					</template>
				</el-table-column>
				<el-table-column prop="Name" :label="item.Name" min-width="180" v-for="(item,i) in ModuleData" :key="i">
					<template slot-scope="scope">
						<a-checkbox :disabled="currentType?true:false" @change="e=>setList(e,item.ID,data[scope.$index])" :checked="data[scope.$index].Module.find(m=>item.ID == m.ModuleID).Value"> </a-checkbox>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import Cache from '@/utils/cache';
import pagination from '@components/pagination/index.vue';
import { ManageRoleModule } from '@/api/follow';
export default {
	components: {
		pagination
	},
	data() {
		return {
			data:[],
			ModuleData:[],
			form: this.$form.createForm(this, {
				name: 'advanced_search'
			}),
			pagination: this.global.pagination,
			loading: false,
			values: {},
			tableHeight: parseFloat(window.innerHeight - 160),
			requestUrl: this.global.requestUrl,
			token: Cache.get('token'),
			currentType:true
		};
	},
	computed: {},
	created() {
		this.getList(1);
		// this.getOtherList()
	},
	mounted() {},
	methods: {
		moment,
		async getList(type) {
			this.loading = true;
			let data = {};
			data = { ...this.values,roleID:this.$route.query.roleID, pageIndex: this.pagination.currentPage, pageSize: this.pagination.pageSize };
			let res = await ManageRoleModule(type==1?'DoGetList':'DoGetAllList',data);
			this.loading = false;
			this.data = res.data.data;
			this.ModuleData = res.data.ModuleData
			this.$refs.tableList.bodyWrapper.scrollTop = 0;
		},
		addList() {
			this.currentType = !this.currentType
			this.getList(this.currentType?1:2)
		},
		async setList(e,ModuleID,list){
			let that = this
			let data = {};
			if(e.target.checked){
				data.RoleID = that.$route.query.roleID
				data.ModuleID = ModuleID
				data.DepartCode = list.DepartCode
			}else{
				data.roleID = that.$route.query.roleID
				data.moduleID = ModuleID
				data.departCode = list.DepartCode
			}
			let res = await ManageRoleModule(e.target.checked?'DoAdd':'DoDelete',data);
			if (res.data.code == 0) {
				list.Module.find(m=>ModuleID == m.ModuleID).Value = e.target.checked
				// that.getList();
				that.$message.success(res.data.msg);
			} else {
				that.$message.error(res.data.msg);
			}
		},
		closeFun(data) {
			this.addIf = false;
			if (data == 1) {
				this.getList();
			}
		}
	}
};
</script>

<style lang="less" scoped>
.home-form /deep/.ant-form-item {
	display: flex;
	margin-bottom: 10px !important;
}
.home-form /deep/.ant-form-item-label {
	width: 80px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: right;
}
.home-form /deep/.ant-form-item-control-wrapper {
	flex: 1;
}
.home-form /deep/.ant-calendar-picker {
	width: 100%;
}
/deep/.el-table th.is-leaf {
	background: #fafafa;
}
/deep/.el-table td,
/deep/.el-table th {
	padding: 5px;
}
.option {
	margin-top: 10px;
	margin-bottom: 20px;
	overflow: hidden;
	.ant-btn {
		font-size: 12px;
	}
}
.el-pagination {
	margin-top: 10px;
}
/deep/ .ant-form-item-control-wrapper {
	min-width: 200px;
}
</style>
